<template>
  <div
    class="h-[30px] flex gap-3 cursor-pointer my-5 bg-[#E7EEFD] rounded-[15px]"
  >
    <div
      v-for="value in props.option"
      :class="` px-4 h-[30px] rounded-[15px] leading-[30px] text-[14px]  ${
        value.path === props.modelValue
          ? 'bg-blue-400 text-white'
          : 'bg-[#E7EEFD] text-gray-500'
      }`"
      @click="toggle(value.path)"
    >
      <RouterLink :to="value.path">{{ value.name }}</RouterLink>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
var props = defineProps({
  option: Array,
  modelValue: String,
});
var emit = defineEmits(["update:modelValue"]);
var toggle = function (path) {
  emit("update:modelValue", path);
};
</script>
